<template>
  <div class="container">
    <div class="head">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="">
          <el-input v-model="formInline.user" placeholder="输入名字"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="search">搜索</el-button>
          <el-button type="success" @click="addMessage">添加留言</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="list">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="name" label="用户名"> </el-table-column>
        <el-table-column prop="content" label="内容"> </el-table-column>
        <el-table-column prop="createdAt" label="发布时间"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[2, 10, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <div class="modal">
      <el-dialog title="编辑" :visible.sync="dialogFormVisible">
        <el-form :model="modalForm">
          <el-form-item label="名字">
            <el-input v-model="modalForm.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="内容">
            <el-input v-model="modalForm.content" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="editTrue">保存</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //接口返回数据状态
      state: "初始列表",
      //模态表单
      dialogFormVisible: false, //显示隐藏
      modalForm: "",
      pageNumber: 1, //第几页
      pageSize: 2, //每页多少条
      total: null, //留言条数
      //表格数据
      tableData: null,
      //搜索框
      formInline: {
        user: null,
      },
    };
  },
  methods: {
    async editTrue() {
      this.dialogFormVisible = false;
      let a = await this.$axios.put("/wish", {
        id: this.modalForm.id,
        name: this.modalForm.name,
        content: this.modalForm.content,
      });
      if (a.data.code == 200) {
        this.getData();
      }
    },
    // 搜索栏搜索
    search() {
      this.$axios
        .get("/wish", {
          params: {
            page: this.pageNumber,
            rows: this.pageSize,
            name: this.formInline.user,
          },
        })
        .then((res) => {
          if (res.data.code == 200) {
            //修改状态为 搜索列表
            this.state = "搜索列表";
            console.log(res, "res");
            this.tableData = res.data.data.list;
            this.total = res.data.data.count;
            // console.log(this.tableData, "tabledaat");
          } else {
            this.$message({
              message: res.data.msg,
              type: "error",
            });
          }
        });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);

      if (this.state == "初始列表") {
        this.pageSize = val;
        this.getData();
      }
      if (this.state == "搜索列表") {
        this.pageNumber = val;

        this.$axios
          .get("/wish", {
            params: {
              page: this.pageNumber,
              rows: this.pageSize,
              name: this.formInline.user,
            },
          })
          .then((res) => {
            if (res.data.code == 200) {
              console.log(res, "res");
              this.tableData = res.data.data.list;

              // console.log(this.tableData, "tabledaat");
            } else {
              this.$message({
                message: res.data.msg,
                type: "error",
              });
            }
          });
      }
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);

      if (this.state == "初始列表") {
        this.getData();
        this.pageNumber = val;
      }
      if (this.state == "搜索列表") {
        this.pageNumber = val;
        this.$axios
          .get("/wish", {
            params: {
              page: this.pageNumber,
              rows: this.pageSize,
              name: this.formInline.user,
            },
          })
          .then((res) => {
            if (res.data.code == 200) {
              console.log(res, "res");
              this.tableData = res.data.data.list;

              // console.log(this.tableData, "tabledaat");
            } else {
              this.$message({
                message: res.data.msg,
                type: "error",
              });
            }
          });
      }
    },
    //表格删除
    handleDelete(index, content) {
      console.log(index, content);
      this.$axios
        .delete("/wish", {
          data: {
            id: content.id,
          },
        })
        .then((res) => {
          console.log(res);
          this.getData();
        });
    },
    //表格编辑
    handleEdit(index, content) {
      console.log(index, content);
      this.dialogFormVisible = true;
      this.modalForm = JSON.parse(JSON.stringify(content));
      // console.log(this.modalForm,'thsi.modalForm')
    },
    //跳转到添加留言页面
    addMessage() {
      this.$router.push("/home/add")
    },
    //打开页面请求数据
    async getData() {
      let a = await this.$axios.get("/wish", {
        params: {
          page: this.pageNumber,
          rows: this.pageSize,
        },
      });
      console.log(a);
      if (a.data.code == 200) {
        this.tableData = a.data.data.list;
        this.total = a.data.data.count;
        //请求数据状态修改为 初始列表
        this.state = "初始列表";
      } else {
        this.$message({
          message: a.data.msg,
          type: "error",
        });
      }

      console.log(this.tableData, "tabledata");
    },
  },
  created() {
    this.getData();
  },
};
</script>

<style lang="scss" scoped>
.container {
  .head {
    text-align: left;
  }
}
</style>